<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选你爱我求和</title>
  </head>

  <body>
    <div id="app">
      <div>
        <div v-for="item in arr" style="display: inline-block">
          <input type="checkbox" v-model="item.checked" value="" />
          <span>{{item.num}}</span>
        </div>
        <p>你选中的元素, 累加的值和为: {{total}}</p>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          arr: [
            { num: 9, checked: false },
            { num: 15, checked: false },
            { num: 19, checked: false },
            { num: 25, checked: false },
            { num: 29, checked: false },
            { num: 31, checked: false },
            { num: 48, checked: false },
            { num: 57, checked: false },
            { num: 62, checked: false },
            { num: 79, checked: false },
            { num: 87, checked: false }
          ],
          newArr: []
        },
        computed: {
          total() {
            const result = this.arr.reduce((sum, item) => {
              if (item.checked) {
                return sum + item.num
              } else {
                return sum
              }
            }, 0)
            return result
          }
        }
      })
    </script>
  </body>
</html>
